<template>
	<view class="uy-p-x-30 uy-bg-ffffff" :style="`min-height: ${windowObj.windowHeight}px`">
		<uni-nav-bar :fixed="true" :leftWidth="25" rightWidth="0" :border="false" @clickLeft="tapTo(1)">
			<view class="uy-m-l-15" slot="left">
				<uni-icons type="left" size="24"></uni-icons>
			</view>
			<view class="uy-w-p-100">
				<uy-search :autoFocus="autoFocus" @click="tapTo('search', $event)"></uy-search>
			</view>
		</uni-nav-bar>

		<view class="uy-m-t-30" v-if="historyStorage.length">
			<uy-title leftText="搜索历史" :fontWeight="false" :showDec="false" :showRight="true" @clickRight="showModal = true">
				<view class="" slot="right">
					<uni-icons type="trash" size="20"></uni-icons>
				</view>
			</uy-title>
		
			<view class="uy-flex uy-flex-wrap">
				<view class="uy-p-y-10 uy-p-x-25 uy-m-r-20 uy-m-t-20 uy-color-666666 uy-b-r-10 uy-br-F5F5F5"
					v-for="(item,index) in historyStorage" :key="index" @tap="tapTo('search', item)">
					{{item || ''}}
				</view>
			</view>
		</view>
		
		<view class="uy-m-t-30" v-if="searchHot.length">
			<uy-title leftText="热门搜索" :fontWeight="false" :showDec="false"></uy-title>
		
			<view class="uy-flex uy-flex-wrap">
				<view class="uy-p-y-10 uy-p-x-25 uy-m-r-20 uy-m-t-20 uy-color-666666 uy-b-r-10 uy-br-F5F5F5"
					v-for="(item,index) in searchHot" :key="index" @tap="tapTo('search', item)">
					{{item || ''}}
				</view>
			</view>
		</view>

		<uy-modal-popup :show.sync="showModal" :title="modalData.title" :content="modalData.content" @click="tapTo('empty')"></uy-modal-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				replaceKeyword: '',
				autoFocus: false,
				historyStorage: [],
				searchHot: ['精美', '服装'],
				showModal: false,
				modalData: {
					title: '温馨提示',
					content: '确认清除所有历史记录?'
				}
			}
		},
		onLoad() {
			this.autoFocus = true;
		},
		onShow() {
			uni.getStorage({
				key: 'historyStorage',
				success: res => {
					this.historyStorage = res.data
				}
			})
		},
		computed: {
			windowObj() {
				let obj = uni.getSystemInfoSync();
				return obj
			}
		},
		methods: {
			tapTo(state, e) {
				switch(state) {
					case 1:
						this.$uy.overBack()
						break
					case 'empty':
						uni: uni.removeStorage({
							key: 'historyStorage',
							success: () => {
								this.historyStorage = [];
								uni.setStorageSync('historyStorage', [])
							}
						})
						break
					case 'search':
						if (e == '') {
							this.$uy.toast('请输入关键字~')
							return
						}
						this.keyword = e;
						this.replaceKeyword = e;
						var news = this.historyStorage.filter(item => item != this.replaceKeyword)
						news.unshift(this.replaceKeyword)
						uni: uni.setStorage({
							key: 'historyStorage',
							data: this.historyStorage.concat(e).reverse(),
							data: news
						})
						this.$openPage({
							name: 'searchList',
							query: {
								keyword: e
							}
						})
						break
					default:
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>